import React, { useState, memo, useMemo, useCallback } from 'react';
import ReactDOM from 'react-dom';
function Child(props) {
  let { count } = props
  console.log('child render')
  return <>
    <h2>Child {count}</h2>
  </>
}
Child = memo(Child)
/* 
  新组建=memo(组件) memo处理过的组件 只有当传进来的数据发生改变的时候才会重新组件 类似于PureComponent
  
  useMemo 是用来缓存 对象的地址的


  变量= useCallback(函数体,[]) 让这个变量用的永远是初次创造的那个函数体地址；

  memo useMemo useCallback 都是用来减少子组件的渲染次数的
*/
function App() {
  let [state, setState] = useState({
    count: 100,
    name: "珠峰"
  })
  // let obj = {
  //   count: state.count
  // }
  let obj = useMemo(() => {
    /* 
      只有当state.count 发生改变的时候 才会赋予obj新的地址
    */
    return {
      count: state.count,
      // fn: () => { }
    }
  }, [state.count])

  // const fn = () => { }
  const fn = useCallback(() => { }, [])
  return <>
    <h2>{state.count}</h2>
    <input type="text" value={state.name} onChange={(e) => { setState({ ...state, name: e.target.value }) }} />
    <button onClick={() => setState({ ...state, count: state.count + 10 })}>+</button>
    <Child data={obj} qqq={fn} />
  </>
}


ReactDOM.render(<App />, document.getElementById('root'))